<div class="row" style="padding-left: 50px; padding-right: 150px;">
  <div class="row flex-items-xs-between flex-items-xs-top" style="padding-left: 15px; padding-right: 15px;">
    <h3 class="header-title" id="创建部署模版">创建部署模版</h3>
  </div>
  <div style="position: fixed;right: 0;top: 100px; width: 200px; max-height: calc(100% - 160px);overflow-y: auto;">
    <wayne-navigation container=".content-area" [node]="naviList"></wayne-navigation>
  </div>
  <form #ngForm="ngForm" style="padding-right: 30px;width: 100%">
    <section class="form-block wrap">
      <div>
        <label class="label-level1" id="发布信息">发布信息</label>
        <div class="form-group form-group-padding">
          <label class="col-md-3 form-group-label-override required">发布说明</label>
          <textarea name="deployment_description" [(ngModel)]="deploymentTpl.description" rows="3" style="width: 65%" required>
          </textarea>

        </div>
      </div>
    </section>
    <section class="form-block wrap">
      <div>
        <label class="label-level1" id="更新策略">更新策略</label>
        <div class="form-group form-group-padding">
          <label class="col-md-3 form-group-label-override required">更新方式</label>
          <div class="radio-inline">
              <input type="radio" name="statefulSetStrategyType" id="statefulSetStrategyType1" value="RollingUpdate" [(ngModel)]="kubeDeployment.spec.strategy.type" checked>
              <label for="statefulSetStrategyType1">滚动更新</label>
          </div>
          <div class="radio-inline">
              <input type="radio" name="statefulSetStrategyType" id="statefulSetStrategyType2" value="Recreate"  [(ngModel)]="kubeDeployment.spec.strategy.type">
              <label for="statefulSetStrategyType2">删除重建</label>
          </div>
        </div>
        <div *ngIf="kubeDeployment.spec.strategy.type == 'RollingUpdate'" class="form-group form-group-padding">
          <label class="col-md-3 form-group-label-override">滚动数量
            <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
              <clr-icon shape="info-circle" size="24"></clr-icon>
              <span class="tooltip-content">滚动更新中最多可超过指定实例的总数量,数字或百分比</span>
            </a>
          </label>
          <label aria-haspopup="true" role="tooltip" [class.invalid]="formValid('rollingUpdate_maxSurge')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
          <input type="text" required name="rollingUpdate_maxSurge" pattern="^(100|[1-9]?\d(\.\d\d?\d?)?)%$|[0-9]$" [(ngModel)]="kubeDeployment.spec.strategy.rollingUpdate.maxSurge"
                 placeholder="数字或百分比,例如1或20%">
            <span class="tooltip-content">
                数量应为数字或百分比
              </span>
          </label>
          <label class="col-md-3 form-group-label-override"  style="color: #000">最大不可用
            <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
              <clr-icon shape="info-circle" size="24"></clr-icon>
              <span class="tooltip-content">滚动更新中最大不可用的实例数量,数字或百分比</span>
            </a>
          </label>
        <label aria-haspopup="true" role="tooltip" [class.invalid]="formValid('rollingUpdate_maxUnavailable')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
          <input type="text" required name="rollingUpdate_maxUnavailable"  [(ngModel)]="kubeDeployment.spec.strategy.rollingUpdate.maxUnavailable"
                 placeholder="数字或百分比,例如1或20%">
          <span class="tooltip-content">
                数量应为数字或百分比
          </span>
        </label>
        </div>
      </div>
    </section>
    <section *ngFor="let container of kubeDeployment.spec.template.spec.containers; let i = index" class="form-block wrap">
      <div>
        <label class="label-level1" [id]="i ? '容器配置' + i : '容器配置'">容器配置
          <clr-icon (click)="onDeleteContainer(i)" shape="trash" title="删除容器" class="is-solid"></clr-icon>
        </label>
        <div class="container-box">
          <label class="label-level2" [id]="i ? '镜像配置' + i : '镜像配置'">镜像配置</label>
          <div class="form-group form-group-padding">
            <label class="col-md-3 form-group-label-override required">容器名称</label>
            <label aria-haspopup="true" role="tooltip" [class.invalid]="containerIsInvalid(i,'container.name_')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
              <input type="text" class="col-sm-12" size="90" required name="container.name_{{i}}" pattern="[a-z]([-a-z0-9]*[a-z0-9])?" [(ngModel)]="container.name" placeholder="英文，dns域名规则">
              <span class="tooltip-content">
                容器名称不符合规范，验证规则[a-z]([-a-z0-9]*[a-z0-9])?
              </span>
            </label>
          </div>
          <div class="form-group form-group-padding">
            <label class="col-md-3 form-group-label-override required">镜像地址</label>
            <label aria-haspopup="true" role="tooltip" [class.invalid]="containerIsInvalid(i,'container.image_')" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left">
              <input type="text" size="90" class="col-sm-12" name="container.image_{{i}}" required pattern="{{getImagePrefixReg()}}" [(ngModel)]="container.image"
                placeholder="镜像地址">
              <span class="tooltip-content">
                镜像不符合校验规则 {{getImagePrefixReg()}}
              </span>
            </label>
          </div>
          <div class="form-group form-group-padding">
            <label class="col-md-3 form-group-label-override required">内存容量</label>
            <label aria-haspopup="true" [class.invalid]="!checkMemory(container.resources.limits.memory)" style="padding-right: 0;margin-right: 0;padding-left: 0"
              role="tooltip" class="col-md-6 tooltip tooltip-validation tooltip-md tooltip-bottom-left">
              <input type="number" style="width:inherit" name="container.resources.limits.memory_{{i}}" required [(ngModel)]="container.resources.limits.memory"
                placeholder="单位G">
              <span class="tooltip-content">
                内存大小应该在0~{{memoryLimit}}G之间
              </span>
            </label>
            <label class="col-md-4">G&nbsp;&nbsp;&nbsp;
              <label style="color: red">金额: {{container.resources.limits.memory * memoryUnitPrice | number:'1.2-2'}}元/月</label>
            </label>
          </div>
          <div class="form-group form-group-padding">
            <label class="col-md-3 form-group-label-override required">CPU核数</label>
            <label aria-haspopup="true" [class.invalid]="!checkCpu(container.resources.limits.cpu)" style="padding-right: 0;margin-right: 0;padding-left: 0"
              role="tooltip" class="col-md-6 tooltip tooltip-validation tooltip-md tooltip-bottom-left">
              <input type="number" name="container.resources.limits.cpu_{{i}}" [(ngModel)]="container.resources.limits.cpu" style="width:inherit"
                required placeholder="单位个">
              <span class="tooltip-content">
                CPU大小应该在0~{{cpuLimit}}核之间
              </span>
            </label>
            <label class="col-md-4">核&nbsp;&nbsp;&nbsp;
              <label style="color: red">金额: {{container.resources.limits.cpu * cpuUnitPrice | number:'1.2-2'}}元/月</label>
            </label>
          </div>

        </div>

        <div class="container-box">
          <label class="label-level2" [id]="i ? '环境变量配置' + i : '环境变量配置'">环境变量配置
            <button (click)="onAddEnvFrom(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add-text"></clr-icon>批量加载</button>
             <button (click)="onAddEnv(i)" style="margin-left: 10px;" class="wayne-button primary"><clr-icon shape="add"></clr-icon>逐个加载</button>
          </label>
          <div *ngFor="let envFrom of container.envFrom; let j = index">
            <div class="form-group form-group-padding">
              <label for="envFromType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">批量加载
                <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
                  <clr-icon shape="info-circle" size="24"></clr-icon>
                  <span class="tooltip-content">批量从配置集或加密字典加载环境变量</span>
                </a>
              </label>
              <div class="select">
                <select id="envFromType-{{i}}-{{j}}" name="envFrom.type_{{i}}_{{j}}" (change)="envFromChange($event.target.value,i,j)">
                  <option value="1" [selected]="envFrom.configMapRef">从配置集加载</option>
                  <option value="2" [selected]="envFrom.secretRef">从加密字典加载</option>
                </select>
              </div>

              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnvFrom(i)" shape="plus-circle" title="添加环境变量" class="is-solid"></clr-icon>
              <clr-icon style="margin-top: 10px" (click)="onDeleteEnvFrom(i,j)" shape="trash" title="删除环境变量" class="is-solid"></clr-icon>
            </div>
            <div *ngIf="envFrom" class="form-group form-group-padding">
              <input type="text" size="40" name="envFrom.prefix_{{i}}_{{j}}" [(ngModel)]="envFrom.prefix" placeholder="为所有环境变量添加相同的前缀，可为空">
            </div>
            <div *ngIf="envFrom && envFrom.configMapRef" class="form-group form-group-padding">
              <input type="text" size="40" required name="envFrom.configMapRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.configMapRef.name"
                placeholder="配置集名称">
            </div>
            <div *ngIf="envFrom && envFrom.secretRef" class="form-group form-group-padding">
              <input type="text" size="40" required name="envFrom.secretRef.name_{{i}}_{{j}}" [(ngModel)]="envFrom.secretRef.name"
                placeholder="加密字典名称">
            </div>

          </div>

          <div *ngFor="let env of container.env; let j = index">
            <div class="form-group form-group-padding">
              <label for="envType-{{i}}-{{j}}" class="col-md-3 form-group-label-override required">逐个加载
                <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
                  <clr-icon shape="info-circle" size="24"></clr-icon>
                  <span class="tooltip-content">其它类型的环境变量只支持高级模式编辑</span>
                </a>
              </label>
              <div class="select">
                <select id="envType-{{i}}-{{j}}" name="env.type_{{i}}_{{j}}" (change)="envChange($event.target.value,i,j)">
                  <option value="0" [selected]="env.value!=null">自定义环境变量</option>
                  <option value="1" [selected]="env.valueFrom?.configMapKeyRef">从配置集加载</option>
                  <option value="2" [selected]="env.valueFrom?.secretKeyRef">从加密字典加载</option>
                  <option value="3" selected>其它</option>
                </select>
              </div>
              <clr-icon style="margin-top: 10px;margin-right: 8px" (click)="onAddEnv(i)" shape="plus-circle" title="添加环境变量" class="is-solid"></clr-icon>
              <clr-icon style="margin-top: 10px" (click)="onDeleteEnv(i,j)" shape="trash" title="删除环境变量" class="is-solid"></clr-icon>
            </div>
            <div class="form-group form-group-padding">
              <input [(ngModel)]="env.name" required name="env.name_{{i}}_{{j}}" type="text" size="45" placeholder="环境变量名称">
            </div>
            <div *ngIf="env.value != null" class="form-group form-group-padding">
              <input [(ngModel)]="env.value" required name="env.value_{{i}}_{{j}}" type="text" size="45" placeholder="环境变量值">
            </div>
            <div *ngIf="env.valueFrom && env.valueFrom.configMapKeyRef" class="form-group form-group-padding">
              <input type="text" size="40" required name="env.valueFrom.configMapKeyRef.name_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.configMapKeyRef.name"
                placeholder="配置集名称">
              <input type="text" size="40" required name="env.valueFrom.configMapKeyRef.key_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.configMapKeyRef.key"
                placeholder="配置集key">
            </div>
            <div *ngIf="env.valueFrom && env.valueFrom.secretKeyRef" class="form-group form-group-padding">
              <input type="text" size="40" required name="env.valueFrom.secretKeyRef.name_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.secretKeyRef.name"
                placeholder="加密字典名称">
              <input type="text" size="40" required name="env.valueFrom.secretKeyRef.key_{{i}}_{{j}}" [(ngModel)]="env.valueFrom.secretKeyRef.key"
                placeholder="加密字典key">
            </div>

          </div>


        </div>

        <div class="container-box">
          <div class="toggle-switch">
            <input type="checkbox" [checked]="container.readinessProbe" (change)="readinessProbeChange(i)" id="readinessProbe{{i}}">
            <label class="label-level2" [id]="i ? '可用性检查' + i : '可用性检查'" for="readinessProbe{{i}}">可用性检查（建议开启）
              <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
                <clr-icon shape="info-circle" size="24"></clr-icon>
                <span class="tooltip-content">定期检查服务状态，只有检查通过才会提供服务，检查失败将会从可用服务列表移除</span>
              </a>
            </label>
          </div>

          <div *ngIf="container.readinessProbe" style="color:#000">
            <div class="form-group form-group-padding">
              <label class="col-md-3 form-group-label-override">超时时间
                <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                  <clr-icon shape="info-circle" size="24"></clr-icon>
                  <span class="tooltip-content">单位秒，请求超时时间</span>
                </a>
              </label>
              <input type="number" required name="container.readinessProbe.timeoutSeconds_{{i}}" [(ngModel)]="container.readinessProbe.timeoutSeconds"
                placeholder="单位秒">
              <label class="col-md-3 form-group-label-override">检查周期
                <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                  <clr-icon shape="info-circle" size="24"></clr-icon>
                  <span class="tooltip-content">单位秒，执行检查间隔</span>
                </a>
              </label>
              <input type="number" required name="container.readinessProbe.periodSeconds{{i}}" [(ngModel)]="container.readinessProbe.periodSeconds"
                placeholder="单位秒">
            </div>
            <div class="form-group form-group-padding">
              <label class="col-md-3 form-group-label-override">失败重试次数</label>
              <input type="number" required name="container.readinessProbe.failureThreshold{{i}}" [(ngModel)]="container.readinessProbe.failureThreshold">
            </div>

            <div class="form-group form-group-padding">
              <label for="readinessProbeType_{{i}}" class="col-md-3 form-group-label-override required">可用性检查方式</label>
              <div class="select">
                <select name="readinessProbeType_{{i}}" (change)="readinessProbeTypeChange($event.target.value,i)">
                  <option value="0" [selected]="container.readinessProbe.httpGet">HTTP请求</option>
                  <option value="1" [selected]="container.readinessProbe.tcpSocket">TCP端口</option>
                  <option value="2" [selected]="container.readinessProbe.exec">执行命令</option>
                </select>
              </div>
            </div>
            <div *ngIf="container.readinessProbe.httpGet" class="form-group form-group-padding">
              <input type="number" size="30" required name="container.readinessProbe.httpGet.port_{{i}}" [(ngModel)]="container.readinessProbe.httpGet.port"
                placeholder="请求HTTP端口">
              <input type="text" size="70" required name="container.readinessProbe.httpGet.path_{{i}}" [(ngModel)]="container.readinessProbe.httpGet.path"
                placeholder="请求URL">
            </div>
            <div *ngIf="container.readinessProbe.tcpSocket" class="form-group form-group-padding">
              <input type="number" size="30" required name="container.readinessProbe.tcpSocket.port_{{i}}" [(ngModel)]="container.readinessProbe.tcpSocket.port"
                placeholder="请求TCP端口">
            </div>
            <div *ngIf="container.readinessProbe.exec">
              <div class="form-group form-group-padding">
                <textarea name="container.readinessProbe.exec.command_{{i}}" [(ngModel)]="container.readinessProbe.exec.command[0]"  placeholder="多个命令换行输入，例如：
                  /bin/healthz.sh
                  --arg1
                  foo
                  --arg2
                  bar"></textarea>
              </div>


            </div>
          </div>
        </div>

        <div class="container-box">
          <div class="toggle-switch">
            <input type="checkbox" [checked]="container.livenessProbe" (change)="livenessProbeChange(i)" id="livenessProbe{{i}}">
            <label class="label-level2" [id]="i ? '存活检查' + i : '存活检查'" for="livenessProbe{{i}}">存活检查
              <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
                <clr-icon shape="info-circle" size="24"></clr-icon>
                <span class="tooltip-content">定期检查容器状态，检查失败将会重启容器（适用于可能假死并需要重启的服务）</span>
              </a>
            </label>
          </div>

          <div *ngIf="container.livenessProbe" style="color:#000">
            <div class="form-group form-group-padding">
              <label class="col-md-3 form-group-label-override">超时时间
                <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                  <clr-icon shape="info-circle" size="24"></clr-icon>
                  <span class="tooltip-content">单位秒，请求超时时间</span>
                </a>
              </label>
              <input type="number" required name="container.livenessProbe.timeoutSeconds_{{i}}" [(ngModel)]="container.livenessProbe.timeoutSeconds"
                placeholder="单位秒">
              <label class="col-md-3 form-group-label-override">检查周期
                <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
                  <clr-icon shape="info-circle" size="24"></clr-icon>
                  <span class="tooltip-content">单位秒，执行检查间隔</span>
                </a>
              </label>
              <input type="number" required name="container.livenessProbe.periodSeconds{{i}}" [(ngModel)]="container.livenessProbe.periodSeconds"
                placeholder="单位秒">
            </div>
            <div class="form-group form-group-padding">
              <label class="col-md-3 form-group-label-override">失败重试次数</label>
              <input type="number" required name="container.livenessProbe.failureThreshold{{i}}" [(ngModel)]="container.livenessProbe.failureThreshold">
              <label class="col-md-3 form-group-label-override">检查延迟
                <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-md">
                  <clr-icon shape="info-circle" size="24"></clr-icon>
                  <span class="tooltip-content">单位秒，启动多久之后开始存活检查，适用于启动时间较长的服务</span>
                </a>
              </label>
              <input type="number" required name="container.livenessProbe.initialDelaySeconds{{i}}" [(ngModel)]="container.livenessProbe.initialDelaySeconds"
                placeholder="单位秒">
            </div>

            <div class="form-group form-group-padding">
              <label for="livenessProbeType_{{i}}" class="col-md-3 form-group-label-override required">可用性检查方式</label>
              <div class="select">
                <select name="livenessProbeType_{{i}}" (change)="livenessProbeTypeChange($event.target.value,i)">
                  <option value="0" [selected]="container.livenessProbe.httpGet">HTTP请求</option>
                  <option value="1" [selected]="container.livenessProbe.tcpSocket">TCP端口</option>
                  <option value="2" [selected]="container.livenessProbe.exec">执行命令</option>
                </select>
              </div>
            </div>
            <div *ngIf="container.livenessProbe.httpGet" class="form-group form-group-padding">
              <input type="number" size="30" required name="container.livenessProbe.httpGet.port_{{i}}" [(ngModel)]="container.livenessProbe.httpGet.port"
                placeholder="请求HTTP端口">
              <input type="text" size="70" required name="container.livenessProbe.httpGet.path_{{i}}" [(ngModel)]="container.livenessProbe.httpGet.path"
                placeholder="请求URL">
            </div>
            <div *ngIf="container.livenessProbe.tcpSocket" class="form-group form-group-padding">
              <input type="number" size="30" required name="container.livenessProbe.tcpSocket.port_{{i}}" [(ngModel)]="container.livenessProbe.tcpSocket.port"
                placeholder="请求TCP端口">
            </div>
            <div *ngIf="container.livenessProbe.exec">
              <div class="form-group form-group-padding">
                <textarea name="container.livenessProbe.exec.command_{{i}}" [(ngModel)]="container.livenessProbe.exec.command[0]"  placeholder="多个命令换行输入，例如：
                    /bin/healthz.sh
                    --arg1
                    foo
                    --arg2
                    bar"></textarea>
              </div>


            </div>
          </div>
        </div>
        <div class="container-box">
          <div class="toggle-switch">
            <input type="checkbox" [checked]="container.lifecycle"  id="lifecycle{{i}}" (change)="lifecycleChange(i)">
            <label class="label-level2" [id]="i ? '生命周期' + i : '生命周期'" for="lifecycle{{i}}">生命周期
              <a role="tooltip" aria-haspopup="true" class="tooltip tooltip-lg">
                <clr-icon shape="info-circle" size="24"></clr-icon>
                <span class="tooltip-content">容器生命周期钩子，可以在postStart/preStop两个阶段定义额外的操作</span>
              </a>
            </label>
          </div>

          <div *ngIf="container.lifecycle" style="color:#000">
            <div class="form-group form-group-padding">
              <label for="lifecycleType_{{i}}" class="col-md-3 form-group-label-override required">postStart</label>
              <div class="select">
                <select name="lifecycleType_{{i}}" (change)="lifecyclePostStartProbeTypeChange($event.target.value,i)">
                  <option value="-1" [selected]="!container.lifecycle.postStart">不启用</option>
                  <option value="0" [selected]="container.lifecycle.postStart && container.lifecycle.postStart.httpGet">HTTP请求</option>
                  <option value="1" [selected]="container.lifecycle.postStart && container.lifecycle.postStart.tcpSocket">TCP端口</option>
                  <option value="2" [selected]="container.lifecycle.postStart && container.lifecycle.postStart.exec">执行命令</option>
                </select>
              </div>
            </div>
            <div *ngIf="container.lifecycle.postStart && container.lifecycle.postStart.httpGet" class="form-group form-group-padding">
              <input type="number" size="30" required name="container.lifecycle.postStart.httpGet.port_{{i}}" [(ngModel)]="container.lifecycle.postStart.httpGet.port"
                placeholder="请求HTTP端口">
              <input type="text" size="70" required name="container.lifecycle.postStart.httpGet.path_{{i}}" [(ngModel)]="container.lifecycle.postStart.httpGet.path"
                placeholder="请求URL">
            </div>
            <div *ngIf="container.lifecycle.postStart && container.lifecycle.postStart.tcpSocket" class="form-group form-group-padding">
              <input type="number" size="30" required name="container.lifecycle.postStart.tcpSocket.port_{{i}}" [(ngModel)]="container.lifecycle.postStart.tcpSocket.port"
                placeholder="请求TCP端口">
            </div>
            <div *ngIf="container.lifecycle.postStart && container.lifecycle.postStart.exec">
              <div class="form-group form-group-padding">
                <textarea name="container.lifecycle.postStart.exec.command_{{i}}" [(ngModel)]="container.lifecycle.postStart.exec.command[0]"  placeholder="多个命令换行输入，例如：
                    /bin/healthz.sh
                    --arg1
                    foo
                    --arg2
                    bar"></textarea>
              </div>
            </div>
          </div>
          <div *ngIf="container.lifecycle" style="color:#000">
            <div class="form-group form-group-padding">
              <label for="lifecycleType_{{i}}" class="col-md-3 form-group-label-override required">preStop</label>
              <div class="select">
                <select name="lifecycleType_{{i}}" (change)="lifecyclePreStopProbeTypeChange($event.target.value,i)">
                  <option value="-1" [selected]="!container.lifecycle.preStop">不启用</option>
                  <option value="0" [selected]="container.lifecycle.preStop && container.lifecycle.preStop.httpGet">HTTP请求</option>
                  <option value="1" [selected]="container.lifecycle.preStop && container.lifecycle.preStop.tcpSocket">TCP端口</option>
                  <option value="2" [selected]="container.lifecycle.preStop && normalPreStopExecSelected(i)">执行命令</option>
                  <option value="3" [selected]="container.lifecycle.preStop && safeExitSelected(i)">安全退出</option>
                </select>
              </div>
            </div>
            <div *ngIf="container.lifecycle.preStop && container.lifecycle.preStop.httpGet" class="form-group form-group-padding">
              <input type="number" size="30" required name="container.lifecycle.preStop.httpGet.port_{{i}}" [(ngModel)]="container.lifecycle.preStop.httpGet.port"
                placeholder="请求HTTP端口">
              <input type="text" size="70" required name="container.lifecycle.preStop.httpGet.path_{{i}}" [(ngModel)]="container.lifecycle.preStop.httpGet.path"
                placeholder="请求URL">
            </div>
            <div *ngIf="container.lifecycle.preStop && container.lifecycle.preStop.tcpSocket" class="form-group form-group-padding">
              <input type="number" size="30" required name="container.lifecycle.preStop.tcpSocket.port_{{i}}" [(ngModel)]="container.lifecycle.preStop.tcpSocket.port"
                placeholder="请求TCP端口">
            </div>
            <div *ngIf="container.lifecycle.preStop && normalPreStopExecSelected(i)">
              <div class="form-group form-group-padding">
                <textarea name="container.lifecycle.preStop.exec.command_{{i}}" [(ngModel)]="container.lifecycle.preStop.exec.command[0]"  placeholder="多个命令换行输入，例如：
                    /bin/healthz.sh
                    --arg1
                    foo
                    --arg2
                    bar"></textarea>
              </div>
            </div>
          </div>
        </div>

      </div>
    </section>
  </form>
</div>
<div class="clr-wizard-footer-buttons tpl-bottom" [style.top.px]="top">
  <button type="button" class="btn btn-outline" (click)="onCancel()">取消</button>
  <button type="button" class="btn btn-primary" (click)="onAddContainer()">添加容器</button>
  <button type="button" class="btn btn-primary" (click)="openModal()">高级配置</button>
  <button type="button" class="btn btn-primary" [disabled]="!isValid" (click)="onSubmit()">提交</button>
  <span style="color: red">单实例费用总计：{{totalFee | number:'1.2-2' }}元/月</span>
</div>
<wayne-ace-editor (outputObj)="saveDeployment($event)"></wayne-ace-editor>
